<template>
    <popup
        :show="showPopup"
        width="800px"
        title="文档数据"
        confirmButtonText=""
        cancelButtonText=""
    >
        <div class="px-4 pb-4">
            <el-table :data="pager.lists" size="large" class="mt-4">
                <el-table-column label="下标" prop="chunk_index" width="100" />
                <el-table-column label="分段页码" prop="page_no" width="100" />
                <el-table-column label="向量维度" prop="dimension" width="100" />
                <el-table-column label="训练状态" prop="status" width="100">
                    <template #default="{ row }">
                        <el-tag v-if="row.status === 0" type="info">待训练</el-tag>
                        <el-tag v-if="row.status === 1" type="warning">训练中</el-tag>
                        <el-tag v-if="row.status === 2" type="success">训练成功</el-tag>
                        <el-tooltip v-if="row.status === 3" effect="dark" placement="top">
                            <el-tag type="danger" class="cursor-pointer">训练失败</el-tag>
                            <template #content>
                                <div class="max-w[600px]">{{ row?.error || '-'}}</div>
                            </template>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="分段内容" prop="chunk_texts" min-width="200">
                    <template #default="{ row }">
                        <el-tooltip
                            class="box-item"
                            effect="dark"
                            placement="bottom"
                        >
                            <template #content>
                                <div class="w-[500px]">
                                    {{ row?.chunk_texts }}
                                </div>
                            </template>
                            <div class="line-clamp-2">
                                {{ row?.chunk_texts }}
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <paging
                    v-model="pager"
                    @change="queryLists"
                    layout="total, prev, pager, next, jumper"
                />
            </div>
        </div>
    </popup>
</template>

<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging.ts'
import docsFilesApi from '@/api/apply/docs/files.ts'

const showPopup = ref<boolean>(false)

// 查询参数
const queryParams = reactive({
    file_id: 0
})

// 分页查询
const { pager, queryLists } = usePaging({
    fetchFun: docsFilesApi.dataset,
    params: queryParams,
    size: 10
})

/**
 * 打开表单
 *
 * @param {any} row
 * @returns {Promise<void>}
 */
const open = async (row?: any): Promise<void> => {
    showPopup.value = true
    queryParams.file_id = row.id
    await queryLists()
}

defineExpose({
    open
})
</script>
